<template>
	<el-dialog title="接警人查看绑定安装点" v-model="visible" :close-on-click-modal="false" draggable width="75%">
		<div>
			<el-row>
				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
					<el-form-item label="" prop="address">
						<el-input v-model="state.queryForm.address" placeholder="请输入安装点名称" />
					</el-form-item>
					<el-form-item label="" prop="imei">
						<el-input v-model="state.queryForm.imei" placeholder="请输入IMEI" />
					</el-form-item>
					<el-form-item>
						<el-button formDialogRef icon="search" type="primary" @click="getDataList">
							{{ $t('common.queryBtn') }}
						</el-button>
						<el-button icon="Refresh" formDialogRef @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
					</el-form-item>
				</el-form>
			</el-row>

			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				@sort-change="sortChangeHandle"
			>
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="address" label="安装点名称" show-overflow-tooltip />
				<el-table-column prop="imei" label="IMEI" show-overflow-tooltip />
				<el-table-column prop="deviceType" label="类型-型号" show-overflow-tooltip>
					<template #default="{ row }">
						<span>{{ row.deviceType }}</span>
						<span class="px-1">-</span>
						<span>{{ row.deviceModelName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="deptName" label="所属单位" show-overflow-tooltip />
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>
	</el-dialog>
</template>

<script setup lang="ts" name="InstallDialog">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList } from '/@/api/installation/basicInstallLocation';
const visible = ref(false);
const queryRef = ref();
//  table hook
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	createdIsNeed: false,
	descs: ['create_time'],
});
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true;
	queryRef.value?.resetFields();
	state.queryForm.alarmWorkerId = id;
	getDataList();
};
// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	state.queryForm.imei = '';
	state.queryForm.address = '';
	// 清空多选
	getDataList();
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped></style>
